<template>
  <div class="pieChart pgae-container mini-padding ">
    <div class="chartRow flex-row">
      <div class="pieChartContainer">
        <PieChart id="pieChart1"
          :data="[{ name: 'aaa', value: 11 }, { name: 'bbb', value: 11 }, { name: 'ccc', value: 11 }]"></PieChart>
      </div>
      <div class="pieChartContainer">
        <PieChart id="pieChart2"
          :data="[{ name: 'aaa', value: 11 }, { name: 'bbb', value: 11 }, { name: 'ccc', value: 11 }]"
          :chart-style="{ innerRadius: '0%' }"></PieChart>
      </div>
    </div>

    <pre style="font-size: 16px;">
      <h2>组件参数说明</h2>
      export interface IPieChartDataType {
        value: number  //  --必填  数据值
        name: string  //  -- 必填  数据标题
      }
      export interface IChartStyleType {
        innerRadius?: string  // --选填  内圆半径  默认值  30%
        intervalColor?: string  // --选填  间隙颜色  默认值  #ffffff
        intervalSize?: number  // --选填  间隙大小  默认值  2
        colorList?: string[] // --选填  自定义扇形颜色  默认值  ['#fcc246', '#53fd47', '#47c6fd', '#cffd47']
      }

      export interface IPieChartPropType {
        id: string   //  --必传 图表容器id 
        width?: string  //  -- 不必传  图表容器宽度  默认值父容器大小的 80%
        height?: string  //  -- 不必传  图表容器高度  默认值父容器大小的 80%
        data: IPieChartDataType[], // -- 必传   数据 格式参考IPieChartDataType类型
        chartStyle?: IChartStyleType  //  --不必传  自定义图表样式 格式参考IChartStyleType类型
      }
    </pre>

  </div>
</template>

<script lang='ts' setup>
import PieChart from '@/components/PieChart/PieChart.vue';
</script>

<style scoped lang='scss'>
.pieChartContainer {
  width: 400px;
  height: 250px;
  display: flex;
  align-items: center;
}
</style>